﻿<!DOCTYPE html>
<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <!--
    *
    * (c) Copyright Ascensio System SIA 2021
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    *     http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    *
    -->
    <title>ONLYOFFICE</title>
    <link rel="icon"
        href="images/<%- editor.documentType %>.ico"
        type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="stylesheets/editor.css" />
</head>
<body>
    <div class="form">
        <div id="iframeEditor">
        </div>
    </div>
    <script type="text/javascript" src="<%= apiUrl %>"></script>
    <script type="text/javascript" language="javascript">

        var docEditor;
        var config;

        var innerAlert = function (message, inEditor) {
            if (console && console.log)
                console.log(message);
            if (inEditor && docEditor)
                docEditor.showMessage(message);
        };

        var onAppReady = function () {  // the application is loaded into the browser
            innerAlert("Document editor ready");
        };

        var onDocumentStateChange = function (event) {  // the document is modified
            var title = document.title.replace(/\*$/g, "");
            document.title = title + (event.data ? "*" : "");
        };

        var onMetaChange = function (event) {  // the meta information of the document is changed via the meta command
            if (event.data.favorite) {
                var favorite = !!event.data.favorite;
                var title = document.title.replace(/^\☆/g, "");
                document.title = (favorite ? "☆" : "") + title;
                docEditor.setFavorite(favorite);  // change the Favorite icon state
            }

            innerAlert("onMetaChange: " + JSON.stringify(event.data));
        };

        var onRequestEditRights = function () {  // the user is trying to switch the document from the viewing into the editing mode
            location.href = location.href.replace(RegExp("mode=view\&?", "i"), "");
        };

        var onRequestHistory = function (event) {  // the user is trying to show the document version history
            var historyObj = <%- JSON.stringify(history) %> || null;

            docEditor.refreshHistory(  // show the document version history
                {
                    currentVersion: "<%- file.version %>",
                    history: historyObj
                });
        };

        var onRequestHistoryData = function (data) {  // the user is trying to click the specific document version in the document version history
            var version = data.data;
            var historyData = <%- JSON.stringify(historyData) %> || null;

            docEditor.setHistoryData(historyData[version-1]);  // send the link to the document for viewing the version history
        };

        var onRequestHistoryClose = function (event){  // the user is trying to go back to the document from viewing the document version history
            document.location.reload();
        };

        var onError = function (event) {  // an error or some other specific event occurs
            if (event)
                innerAlert(event.data);
        };

        var onOutdatedVersion = function (event) {  // the document is opened for editing with the old document.key value
            location.reload(true);
        };

        // replace the link to the document which contains a bookmark
        var replaceActionLink = function(href, linkParam) {
            var link;
            var actionIndex = href.indexOf("&action=");
            if (actionIndex != -1) {
                var endIndex = href.indexOf("&", actionIndex + "&action=".length);
                if (endIndex != -1) {
                    link = href.substring(0, actionIndex) + href.substring(endIndex) + "&action=" + encodeURIComponent(linkParam);
                } else {
                    link = href.substring(0, actionIndex) + "&action=" + encodeURIComponent(linkParam);
                }
            } else {
                link = href + "&action=" + encodeURIComponent(linkParam);
            }
            return link;
        }

        var onMakeActionLink = function (event) {  // the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position
            var actionData = event.data;
            var linkParam = JSON.stringify(actionData);
            docEditor.setActionLink(replaceActionLink(location.href, linkParam));  // set the link to the document which contains a bookmark
        };

        var onRequestInsertImage = function(event) {  // the user is trying to insert an image by clicking the Image from Storage button
            docEditor.insertImage({  // insert an image into the file
                "c": event.data.c,
                <%- JSON.stringify(dataInsertImage).substring(1, JSON.stringify(dataInsertImage).length - 1)%>
            })
        };

        var onRequestCompareFile = function() {  // the user is trying to select document for comparing by clicking the Document from Storage button
            docEditor.setRevisedFile(<%- JSON.stringify(dataCompareFile) %>);  // select a document for comparing
        };

        var onRequestMailMergeRecipients = function (event) {  // the user is trying to select recipients data by clicking the Mail merge button
            docEditor.setMailMergeRecipients(<%- JSON.stringify(dataMailMergeRecipients) %>);  // insert recipient data for mail merge into the file
        };

        var onRequestUsers = function () {  // add mentions for not anonymous users
            docEditor.setUsers({  // set a list of users to mention in the comments
                "users": <%- JSON.stringify(usersForMentions) %>
            });
        };

        var onRequestSendNotify = function(event) {  // the user is mentioned in a comment
            event.data.actionLink = replaceActionLink(location.href, JSON.stringify(event.data.actionLink));
            var data = JSON.stringify(event.data);
            innerAlert("onRequestSendNotify: " + data);
        };

        var onRequestSaveAs = function (event) {  //  the user is trying to save file by clicking Save Copy as... button
            var title = event.data.title;
            var url = event.data.url;
            var data = {
                title: title,
                url: url
            }
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "create");
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify(data));
            xhr.onload = function () {
                innerAlert(xhr.responseText);
                innerAlert(JSON.parse(xhr.responseText).file, true);
            }
        }

        var onRequestRename = function(event) { //  the user is trying to rename file by clicking Rename... button
            innerAlert("onRequestRename: " + JSON.stringify(event.data));

            var newfilename = event.data;
            var data = {
                newfilename: newfilename,
                dockey: config.document.key,
            };
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "rename");
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify(data));
            xhr.onload = function () {
                innerAlert(xhr.responseText);
            }
        };

        config = {<%- include("config") %>,
                events: {
                    "onAppReady": onAppReady,
                    "onDocumentStateChange": onDocumentStateChange,
                    "onRequestEditRights": onRequestEditRights,
                    "onError": onError,
                    "onOutdatedVersion": onOutdatedVersion,
                    "onMakeActionLink": onMakeActionLink,
                    "onMetaChange": onMetaChange,
                    "onRequestInsertImage": onRequestInsertImage,
                    "onRequestCompareFile": onRequestCompareFile,
                    "onRequestMailMergeRecipients": onRequestMailMergeRecipients,
                }
            };

        if (<%- JSON.stringify(editor.userid) %> != null) {
            config.events.onRequestHistory = onRequestHistory;
            config.events.onRequestHistoryData = onRequestHistoryData;
            config.events.onRequestHistoryClose = onRequestHistoryClose;
            config.events.onRequestRename = onRequestRename;
            config.events.onRequestUsers = onRequestUsers;
            config.events.onRequestSendNotify = onRequestSendNotify;
        }

        if (config.editorConfig.createUrl) {
            config.events.onRequestSaveAs = onRequestSaveAs;
        }

        var connectEditor = function () {

            if ((config.document.fileType === "docxf" || config.document.fileType === "oform")
                && DocsAPI.DocEditor.version().split(".")[0] < 7) {
                innerAlert("Please update ONLYOFFICE Docs to version 7.0 to work on fillable forms online.");
                return;
            }

            docEditor = new DocsAPI.DocEditor("iframeEditor", config);
            fixSize();
        };

        // get the editor sizes
        var fixSize = function () {
            var wrapEl = document.getElementsByClassName("form");
            if (wrapEl.length) {
                wrapEl[0].style.height = screen.availHeight + "px";
                window.scrollTo(0, -1);
                wrapEl[0].style.height = window.innerHeight + "px";
            }
        };

        if (window.addEventListener) {
            window.addEventListener("load", connectEditor);
            window.addEventListener("resize", fixSize);
        } else if (window.attachEvent) {
            window.attachEvent("onload", connectEditor);
            window.attachEvent("onresize", fixSize);
        }

    </script>
</body>
</html>
